<template>
    <div class="RowPage2">
        <div v-if="backlog">
            <card-item :data="cardData1" :flex="6" :min_width="636">
                <div class="todo">
                    <div>
                        <div id="box1_1"></div>
                        <div><span>待取件</span> <span class="num1">{{ backlog.waitingPickupNumber }}</span></div>
                    </div>
                    <div>
                        <div id="box1_2"></div>
                        <div><span>待派件</span> <span class="num2">{{ backlog.waitingDispatchNumber }}</span></div>
                    </div>
                    <div>
                        <div id="box1_3"></div>
                        <div><span>未分配运输</span> <span class="num3">{{ backlog.unassignedTransportTaskNumber }}</span></div>
                    </div>
                    <div>
                        <div id="box1_4"></div>
                        <div><span>超时运输</span> <span class="num4">{{ backlog.timeoutTransportTaskNumber }}</span></div>
                    </div>
                </div>
            </card-item>

            <card-item :data="cardData2" :flex="4" :min_width="448">
                <div class="executing">
                    <div>
                        <div id="box2_1"></div>
                        <div><span>运输中</span> <span class="num5">{{ todayData.taskInTransitNumber }}</span></div>
                    </div>
                    <div>
                        <div id="box2_2"></div>
                        <div><span>派送中</span> <span class="num6">{{ todayData.taskInDeliveryNumber }}</span></div>
                    </div>
                </div>
            </card-item>
        </div>

        <el-skeleton v-else animated style="width: 100%">
            <template slot="template">
                <el-skeleton-item
                    style="width: 100%; height: 260px; margin: 12px"
                />
            </template>
        </el-skeleton>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'RowPage2',
    props: {
        backlog: true,
        todayData: true,
        updateTime: true
    },
    watch: {
        updateTime(val) {
            this.cardData1.time = val
            this.cardData2.time = val
        },
        allMounted (val) {
            if (val) {
                this.render_todo_box1()
                this.render_todo_box2()
                this.render_todo_box3()
                this.render_todo_box4()
                this.render_executing_box1()
                this.render_executing_box2()
                this.$store.commit('setCardRender', true)
            }
        },
        allRender (val) {
            if (val) this.$store.commit('setCardMounted', false)
        }
    },
    data () {
        return {
            cardData1: {
                title: '待办任务',
                tips: `<div>待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件</div>
                    <div>待派送率=待派送/(待派送+派送中+已签收+拒收)</div>
                    <div>未分配率=未分配/全部数据</div>
                    <div>超时率=超时任务/(已完成+进行中+已取消)</div>`,
                time: ''
            },
            cardData2: {
                title: '执行中的任务',
                tips: `<div>运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消)</div>
                    <div>派送率=派送中/(待派送+派送中+已签收+拒收)</div>`,
                time: ''
            },
        }
    },
    methods: {
        render_todo_box1 () {
            let myChart = this.$echarts.init(document.querySelector('#box1_1'))
            let option = {
                series: [
                    {
                        type: 'liquidFill',
                        shape: 'circle',
                        radius: '90%',
                        center: ['50%', '50%'],
                        data: [this.backlog.waitingPickupRate * 0.01],
                        // 球体配置
                        outline: {
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#FF6B4A',
                                shadowBlur: 20,
                                shadowColor: '#FF6B4A'
                            }
                        },
                        color: ['#FF6B4A'],
                        backgroundStyle: {
                            color: '#FFE5E0'
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#C24327',
                                fontSize: 16
                            },
                            formatter: params => {
                                return `${ (params.value * 100).toFixed(0) }%`
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        },
        render_todo_box2 () {
            let myChart = this.$echarts.init(document.querySelector('#box1_2'))
            let option = {
                series: [
                    {
                        type: 'liquidFill',
                        shape: 'circle',
                        radius: '90%',
                        center: ['50%', '50%'],
                        data: [this.backlog.waitingDispatchRate * 0.01],
                        // 球体配置
                        outline: {
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#FFC928',
                                shadowBlur: 20,
                                shadowColor: '#FFC928'
                            }
                        },
                        color: ['#FFC928'],
                        backgroundStyle: {
                            color: '#FFF8D3'
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#7A5107',
                                fontSize: 16
                            },
                            formatter: params => {
                                return `${ (params.value * 100).toFixed(0) }%`
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        },
        render_todo_box3 () {
            let myChart = this.$echarts.init(document.querySelector('#box1_3'))
            let option = {
                series: [
                    {
                        type: 'liquidFill',
                        shape: 'circle',
                        radius: '90%',
                        center: ['50%', '50%'],
                        data: [this.backlog.unassignedTransportTaskRate * 0.01],
                        // 球体配置
                        outline: {
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#2F8DD8',
                                shadowBlur: 20,
                                shadowColor: '#2F8DD8'
                            }
                        },
                        color: ['#2F8DD8'],
                        backgroundStyle: {
                            color: '#D9F9FE'
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#0C3578',
                                fontSize: 16
                            },
                            formatter: params => {
                                return `${ (params.value * 100).toFixed(0) }%`
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        },
        render_todo_box4 () {
            let myChart = this.$echarts.init(document.querySelector('#box1_4'))
            let option = {
                series: [
                    {
                        type: 'liquidFill',
                        shape: 'circle',
                        radius: '90%',
                        center: ['50%', '50%'],
                        data: [this.backlog.timeoutTransportTaskRate * 0.01],
                        // 球体配置
                        outline: {
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#6CC424',
                                shadowBlur: 20,
                                shadowColor: '#6CC424'
                            }
                        },
                        color: ['#6CC424'],
                        backgroundStyle: {
                            color: '#F1FDD6'
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#276D09',
                                fontSize: 16
                            },
                            formatter: params => {
                                return `${ (params.value * 100).toFixed(0) }%`
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        },
        render_executing_box1 () {
            let myChart = this.$echarts.init(document.querySelector('#box2_1'))
            let option = {
                series: [
                    {
                        type: 'liquidFill',
                        shape: 'circle',
                        radius: '90%',
                        center: ['50%', '50%'],
                        data: [this.todayData.taskInTransitRate * 0.01],
                        // 球体配置
                        outline: {
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#DB6095',
                                shadowBlur: 20,
                                shadowColor: '#DB6095'
                            }
                        },
                        color: ['#DB6095'],
                        backgroundStyle: {
                            color: '#FFE7E6'
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#7A195F',
                                fontSize: 16
                            },
                            formatter: params => {
                                return `${ (params.value * 100).toFixed(0) }%`
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        },
        render_executing_box2 () {
            let myChart = this.$echarts.init(document.querySelector('#box2_2'))
            let option = {
                series: [
                    {
                        type: 'liquidFill',
                        shape: 'circle',
                        radius: '90%',
                        center: ['50%', '50%'],
                        data: [this.todayData.taskInDeliveryRate * 0.01],
                        // 球体配置
                        outline: {
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#DD2727',
                                shadowBlur: 20,
                                shadowColor: '#DD2727'
                            }
                        },
                        color: ['#DD2727'],
                        backgroundStyle: {
                            color: '#FDE2D3'
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#6A0729',
                                fontSize: 16
                            },
                            formatter: params => {
                                return `${ (params.value * 100).toFixed(0) }%`
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    },
    computed: {
        ...mapState(['allMounted', 'allRender'])
    }
}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    display: none;
}

.RowPage2 {
    > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        overflow: auto;

        .todo, .executing {
            display: flex;
            justify-content: space-evenly;

            > div {
                div:first-of-type {
                    width: 135px;
                    height: 135px;
                }

                div:last-of-type {
                    display: flex;
                    justify-content: center;
                    font-size: 16px;
                    font-weight: bold;
                    margin: 16px 0 6px 0;

                    span {
                        margin: 0 3px;
                    }

                    .num1 {
                        color: #FC6F4E;
                    }
                    .num2 {
                        color: #FCC82E;
                    }
                    .num3 {
                        color: #6FC42A;
                    }
                    .num4 {
                        color: #358FD6;
                    }
                    .num5 {
                        color: #D96496;
                    }
                    .num6 {
                        color: #DB2D2D;
                    }
                }
            }
        }
    }
}
</style>
